import React from 'react';
import { connect } from 'umi';
import { Row, Col, Modal, message } from "antd";
import PostSearch from "../../components/organize/post/PostSearch";
import PostToolsBar from "../../components/organize/post/PostToolbar";
import PostModal from "../../components/organize/post/PostModal";
import PostList from "../../components/organize/post/PostList";
import TablePagination from '../../components/common/TablePagination';
import CompanyTree from "../../components/organize/department/CompanyTree";

class PostPage extends React.Component {

  render() {

    let {dispatch, globalModel, postModel} = this.props;
    const {
      postList, total, postLoading, operateType, postModalVisible, currentPage, pageSize,
      selectedRowKeys, selectedRows, postInfoData, searchParams
    } = postModel;

    const postSearchProps = {
      onSearch: (searchParams) => {
        dispatch({type: "postModel/updateState", payload: {searchParams}});
        dispatch({type: 'postModel/getPostPage', payload: {currentPage, pageSize, params: searchParams}});
      },
      onReset: () => {
        dispatch({type: "postModel/updateState", payload: {searchParams: null}});
      },
    };

    const postModalProps = {
      operateType,
      postModalVisible,
      postInfoData,
      onSave: (values) => {
        dispatch({type: "postModel/addPost", payload: values});
      },
      updatePost: (values) => {
        dispatch({type: "postModel/updatePost", payload: values});
      },
      onCancel: () => {
        dispatch({type: "postModel/updateState", payload: {postModalVisible: false}});
      },
    };

    const postToolbarProps = {
      addSave: () => {
        dispatch({type: "postModel/updateState", payload: {postModalVisible: true}});
      },
      batchDelete: () => {
        if (selectedRowKeys.length == 0) {
          message.error("请选择要删除的记录！");
          return;
        }
        Modal.confirm({
          title: "删除",
          content: "确定删除选中的记录？",
          onOk() {
            const ids = selectedRowKeys.join(",");
            dispatch({type: "postModel/batchDeletePost", payload: {ids}});
          },
          onCancel() {}
        });
      },
    }

    const postListProps = {
      currentPage,
      pageSize,
      postList,
      postLoading,
      onEdit: (record) => {
        dispatch({
          type: "postModel/updateState",
          payload: {postModalVisible: true, operateType: "edit", postInfoData: record}
        });
      },
      rowSelection: {
        selectedRowKeys,
        selectedRows,
        onChange: (keys, selectedRows) => {
          dispatch({
            type: 'postModel/updateState',
            payload: {
              selectedRows: selectedRows,
              selectedRowKeys: keys,
            },
          })
        },
      }
    }

    const tablePaginationProps = {
      total,
      currentPage,
      pageSize,
      onPageChange: (currentPage, pageSize) => {
        dispatch({type: 'postModel/getPostPage', payload: {currentPage, pageSize, ...searchParams}});
      },
      onShowSizeChange: (currentPage, pageSize) => {
        dispatch({type: 'postModel/getPostPage', payload: {currentPage, pageSize, ...searchParams}});
      },
    };

    return (
      <div style={{ width: 'calc(100% - 30px)', height: 'calc(100% - 30px)', padding: "15px" }}>
        <PostSearch {...postSearchProps} />
        <PostToolsBar {...postToolbarProps} />
        <PostList {...postListProps} />
        <TablePagination {...tablePaginationProps} />

        <PostModal {...postModalProps} />
      </div>
    );
  };
}

function mapStateToProps({globalModel, postModel}){
  return {globalModel, postModel};
}

export default connect(mapStateToProps)(PostPage);
